import React, { Component } from "react";
import MainLayout from "@/component/mainLayout/mainLayout";
import yhTools from "@tools/yh";
import { InterfaceG } from "@config/Config";

import iconPaySuccess from "@/images/imageXHF/pay_success.png";
import "./index.scss";

class PayResult extends Component {
	constructor(props) {
		super(props);
		this.state = {
			realPayAmount: 0, //实付金额
			payToolName: "", //支付工具类型名称
			tranAmount: 0, //应付金额
			couponAmount: 0, //	优惠总金额
			status: "-1", //banner显示状态 -1：不展示，0：banner图，1：显示可用额度
			bannerImg: "", //banner
			bannerLink: "", //banner链接
			availableAmt: 0 //可用额度
		};
		this.timer = null;
	}
	componentDidMount() {
		this.countdown();
		this.queryResult();
		this.getBanner();
	}

	componentWillUnmount() {
		clearTimeout(this.timer);
		this.timer = null;
	}

	//倒计时自动退出
	countdown() {
		this.timer = setTimeout(() => {
			yhTools.noticePaySuccess("支付成功");
		}, 3000);
	}

	//支付结果查询
	queryResult() {
		const tradeNo = sessionStorage.getItem("payResultTradeNo");
		const objs = {
			url: InterfaceG.moneyResult,
			params: {
				tradeNo
			}
		};
		yhTools.request(objs).then(res => {
			if (res.resCode === 200) {
				const {
					realPayAmount,
					payToolName,
					tranAmount,
					couponAmount
				} = res.data;
				this.setState({
					realPayAmount,
					payToolName,
					tranAmount,
					couponAmount
				});
			}
		});
	}

	//banner
	getBanner() {
		const objs = {
			url: InterfaceG.payResultBanner,
			params: {}
		};
		yhTools.request(objs).then(res => {
			if (res.code == "0") {
				const { status, indexServerDtos, availableAmt } = res.data;
				if (status == "0") {
					if (Array.isArray(indexServerDtos)) {
						let { imgUrl, link } = indexServerDtos[0];
						this.setState({
							status,
							bannerImg: imgUrl,
							bannerLink: link
						});
					}
				} else if (status == "1") {
					this.setState({
						status,
						availableAmt
					});
				}
			}
		});
	}

	handleBannerClick() {
		const { bannerLink } = this.state;
		if (bannerLink) {
			this.props.history.push(this.state.bannerLink);
		}
	}

	//固定跳转到小辉贷中间页
	goXhd() {
		this.props.history.push("/jumpMiddlePage");
	}

	//分转元
	changeFen2Yuan(fen) {
		let yuan = fen / 100.0;
		return yuan.toFixed(2);
	}

	render() {
		let _pageParams = {
			header: {
				title: "支付结果",
				titleColor: "#232323",
				headerBackground: "#fff",
				rightButt: "完成",
				rightButtColor: "#F82633",
				rightButtCallBack: () => {
					// 通知生活支付结果
					yhTools.noticePaySuccess("支付成功");
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const {
			realPayAmount,
			payToolName,
			tranAmount,
			couponAmount,
			bannerImg,
			status,
			availableAmt
		} = this.state;

		return (
			<MainLayout pageParams={_pageParams} isHiddenBack>
				<div className="pay—result">
					<div className="pay-wrap">
						<div className="top">
							<img className="status-img" src={iconPaySuccess} alt="" />
							<h1 className="pay-status">支付成功</h1>
							<h2 className="pay-money-text">
								<span>实付</span>
								<span className="money">
									{this.changeFen2Yuan(realPayAmount)}
								</span>
								<span className="unit">元</span>
							</h2>
						</div>

						<ul className="detail-list">
							<li>
								<h3>支付方式</h3>
								<p>{payToolName}</p>
							</li>
							<li>
								<h3>应付金额</h3>
								<p>￥{this.changeFen2Yuan(tranAmount)}</p>
							</li>
							<li>
								<h3>优惠金额</h3>
								<p className="coupon">-￥{this.changeFen2Yuan(couponAmount)}</p>
							</li>
						</ul>
					</div>

					{status == "0" ? (
						// 显示banner图
						<img
							className="banner"
							src={bannerImg}
							alt=""
							onClick={this.handleBannerClick.bind(this)}
						/>
					) : status == "1" ? (
						// 显示可用额度
						<div className="xhd-entry" onClick={this.goXhd.bind(this)}>
							<div className="row1">
								<h3>小辉贷</h3>
								<span>安全便捷 | 无抵押</span>
							</div>
							<div className="row2">当前可借(元)</div>
							<div className="row3">
								<div className="money">{availableAmt}</div>
								<div className="btn">立即借款</div>
							</div>
						</div>
					) : (
						""
					)}
				</div>
			</MainLayout>
		);
	}
}

export default PayResult;
